<!--
 * @Description: 支付入网页面（多端使用）
 * @Author: Kerwin
 * @Date: 2024-02-26 13:52:41
 * @LastEditTime: 2025-07-19 16:48:47
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable no-shadow -->
<!-- eslint-disable no-console -->
<!-- eslint-disable no-use-before-define -->
<script setup lang="ts">
import { reactive, ref, onMounted, watch } from 'vue';
import { onLoad, onShow, onReady, onPageScroll } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, powerBankApi, userApi, productApi } from '@/api';
import { checkLoginState, getImgFullPath } from '@/utils/index'
import { useUserStore } from '@/store'
import customUpload from "../../components/custom-upload/custom-upload.vue"
import {
  browserVersion,
  getCookie
} from '@/utils/common'
import c_channelSelector from './c_channelSelector.vue';
import c_previewSubsection from './c_previewSubsection.vue';
import { route } from '../../../utils/common';

const userStore = useUserStore()
const { userInfo, hasLogin } = storeToRefs(userStore)
const loading = ref(false)
const check = ref(false)
const tabs = [{
  name: '个体商户',
  id: 1
}, {
  name: '企业商户',
  id: 2
}]
const current = ref(0)
const change = (index: number) => {
  handler('shopType', index)
}
const agree = ref(false)
const form = ref()
let formData = reactive({
  paymentChannel: '', // 支付入网通道
  accessStatus: '', // 
  shopType: '', // 门店入驻类型
  frontImage: '', //门头照
  cashImage: '', //收银台照
  insideImage: [], //门店内照片
  shopAdress: '', // 门店经营地址
  idCardFrontImage: '', // 身份证人像面
  idCardBackImage: '', // 身份证国徽面
  idCardFrontImage2: '', // 非法人身份证人像面
  idCardBackImage2: '', // 非法人身份证国徽面
  zjsqAgreementImage: '', //资金授权委托清算
  bankcardImage: '', // 银行卡照
  bankcardBackImage: '', // 银行卡背面照
  bankcardNo: '', // 银行卡卡号
  bankBranch: '', // 银行卡开户行
  bankcardEmail: '',// 银行卡邮箱
  bankcardPhone: '', // 银行卡手机号
  rate: '', //让利比例
  jiesuanType: '法人结算', //法人结算或非法人结算
  qfjsAgreementImage: '', //清分结算授权委托书
  shrzAgreementImage: '', //商户入驻协议
  shfzAgreementImage: '', //商户分账服务开通申请登记表
})
const IMAGE_NAME = {
  frontImage: '门头照',
  cashImage: '收银台照',
  insideImage: '门店内照片',
  idCardFrontImage: '身份证人像面',
  idCardBackImage: '身份证国徽面',
  idCardFrontImage2: '非法人身份证人像面',
  idCardBackImage2: '非法人身份证国徽面',
  zjsqAgreementImage: '资金授权委托清算',
  bankcardImage: '银行卡正面照',
  bankcardBackImage: '银行卡背面照',
  qfjsAgreementImage: '清分结算授权委托书',
  shrzAgreementImage: '商户入驻协议',
  // shfzAgreementImage: '商户分账服务开通申请登记表',
}
const rules = reactive({
  shopAdress: [
    {
      required: true,
      message: '请填写经营地址',
      trigger: ['change', 'blur']
    }
  ],
  bankcardNo: [
    {
      required: true,
      message: '请填写银行卡卡号',
      trigger: ['change', 'blur']
    }
  ],
  bankBranch: [
    {
      required: true,
      message: '请填写银行卡开户行',
      trigger: ['change', 'blur']
    }
  ],
  bankcardEmail: [
    {
      required: true,
      message: '请填写银行卡邮箱',
      trigger: ['change', 'blur']
    }
  ],
  bankcardPhone: [
    {
      required: true,
      message: '请填写银行卡手机号',
      trigger: ['change', 'blur']
    }
  ],
  rate: [
    {
      required: true,
      message: '请填写让利比例',
      trigger: ['change', 'blur']
    }
  ],
})
const uploadUrl = ref(
  'https://api.yupengt.cn/base/api/v1/ali/sendFile'
)
const header = reactive({
  Authorization: `Bearer ${uni.getStorageSync('accessToken') || getCookie('HYToken') || ''}`,
})
const tempFormData = reactive({})
const isPreview = ref(false)
const CHECKSTATUS = {
  DEFAULT: 0,
  CHECK_WILL: 1,
  CHECK_ING: 10,
  CHECK_SUCCESS: 20,
  CHECK_FAIL: 21,
  CHECK_DONE: 22
}
const CHECKTIPS = {
  [CHECKSTATUS.DEFAULT]: '',
  [CHECKSTATUS.CHECK_WILL]: '待审核，后续相关工作人员可能会联系您，请保持电话畅通！',
  [CHECKSTATUS.CHECK_ING]: '资料审核中，请您耐心等待！',
  [CHECKSTATUS.CHECK_SUCCESS]: '审核同意，资料入网中！',
  [CHECKSTATUS.CHECK_FAIL]: '审核拒绝，请您按照相关工作人员的辅助重新提交资料！',
  [CHECKSTATUS.CHECK_DONE]: '入网已完成，您可测试支付！'
}
const tips = ref('')
/**
 * @description: 返回相应状态的tips
 * @param {*} status 审核状态码
 * @return {*} 审核状态tips
 * @author: Kerwin
 */
function getTips(status: any) {
  if (!status) return ''
  return CHECKTIPS[status]
}
function uploadSuccess(data: any, index: any, lists: any, name: string) {
  handler(name, data.data)
}
/**
 * @description: 执行新增或更新
 * @param {*} name 字段名称
 * @param {*} data 字段值数据
 * @return {*}
 * @author: Kerwin
 */
function handler(name: string, data: any) {
  if (isPreview.value) {
    uni.showToast({ icon: "none", title: "预览模式，不可修改数据！" })
    return
  }
  const id = getIdByName(name)
  const executor = id ? externalUpdate : externalAdd
  let fieldValue = data
  if (formData[name] instanceof Array) {
    if (!tempFormData[name]) {
      tempFormData[name] = []
    }
    tempFormData[name].push(data)
    fieldValue = JSON.stringify(tempFormData[name])
  } else {
    tempFormData[name] = data
  }
  executor({
    id,
    fieldName: name,
    fieldValue: fieldValue
  })
}
function inputBlur(e: any, name: string) {
  handler(name, e)
}
function removeObject(index: any, lists: any, name: string) {
  const type = typeof formData[name]
  if (type === 'string') {
    externalUpdate({
      id: getIdByName(name),
      fieldName: name,
      fieldValue: ''
    })
    formData[name] = ''
    tempFormData[name] = ''
  } else {
    tempFormData[name].splice(index, 1)
    externalUpdate({
      id: getIdByName(name),
      fieldName: name,
      fieldValue: JSON.stringify(tempFormData[name])
    })
  }
}
const shopId = ref('')
async function externalAdd(obj: any) {
  const { data } = await productApi.externalAdd({
    ...obj,
    shopId: shopId.value
  })
  getShopExternals(false)
}
async function externalUpdate(obj: any) {
  const { data } = await productApi.externalUpdate({
    ...obj,
    shopId: shopId.value
  })
}
const shopExternals = ref([])
async function getShopExternals(flag = true) {
  if (!shopId.value) return
  uni.showLoading()
  const { data } = await productApi.getShopInfo({
    id: shopId.value,
    detail: true
  }).finally(() => {
    uni.hideLoading()
  })
  shopExternals.value = data.shopExternals
  if (!flag) return
  getValueByName()
  current.value = Number(formData.shopType)
  isFfrjs.value = formData.jiesuanType === '非法人结算'
  tips.value = getTips(formData.accessStatus)
}
function getIdByName(name: string) {
  if (!name) return
  if (!shopExternals.value) return
  const external = shopExternals.value.find(item => item.fieldName === name)
  if (external) {
    return external.id
  } else {
    return null
  }
}
function getValueByName() {
  for (let key in formData) {
    const external = shopExternals.value.find(item => item.fieldName === key)
    if (external) {
      if (typeof formData[key] === 'string') {
        formData[key] = external.fieldValue
        tempFormData[key] = external.fieldValue
      } else {
        formData[key] = JSON.parse(external.fieldValue)
        tempFormData[key] = JSON.parse(external.fieldValue)
      }
    }
  }
}
const protocolTemplates = [
  {
    name: '商户入驻协议',
    url: 'https://image.blacksilverscore.com/App/3667143f-5c74-44c1-8e03-e0ced70371d9.doc'
  },
  {
    name: '清分结算授权委托书',
    url: 'https://image.blacksilverscore.com/App/49045178-8756-438a-a6f7-7d070e255922.docx'
  },
  {
    name: '商户分账服务开通申请登记表',
    url: 'https://image.blacksilverscore.com/App/e229098a-af8a-4bb7-8e81-fbd9170f5bd8.docx'
  },
  {
    name: '非法人清算委托协议',
    url: 'https://image.blacksilverscore.com/App/c6c1de56-3a6e-471a-94d8-94c52a5b70ec.doc'
  }
]
const downloadByUrl = (url: string, filename: string) => {
  if (!url) throw new Error('当前没有下载链接');
  const a = document.createElement("a");
  a.style.display = "none";
  a.href = url;
  a.download = filename;
  // 使用target="_blank"时，添加rel="noopener noreferrer" 堵住钓鱼安全漏洞 防止新页面window指向之前的页面
  a.rel = "noopener noreferrer";
  document.body.append(a);
  a.click();
  setTimeout(() => {
    a.remove();
  }, 1000);
};
const radioList = [
  {
    name: '法人结算',
    disabled: false
  },
  {
    name: '非法人结算',
    disabled: false
  }
]
const isFfrjs = ref(false)
const radioGroupChange = (e: string, name: string) => {
  isFfrjs.value = e === radioList[1].name
  handler(name, e)
}

function submit() {
  if (!agree.value) {
    uni.showToast({
      icon: 'none',
      title: '请勾选同意资料申报由黑银集团工作人员办理'
    })
    return
  }
  form.value.validate((valid: any) => {
    if (valid) {
      const data = { ...formData, ...tempFormData }
      handler('accessStatus', CHECKSTATUS.CHECK_WILL)
      uni.showToast({
        title: '提交成功'
      })
    } else { }
  })
}
const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
const isApp = ref(false)
function toSft() {
  console.log('toSft called with shopId:', shopId.value); // 添加调试输出
  route({
    url: '/packageB/pages/paymentAccess/payInput',
    params: {
      shopId: shopId.value
    },
    type: 'navigate',
    callBack: () => {
      console.log('toSft')
    }
  })
}
// watch(formData,(newVal,oldVal) => {
//   if(newVal?.paymentChannel === 'sft') {
//     toSft()
//   }
// })
async function channelConfirm(arg: any[]) {
  const data = arg[0]
  const callback = arg[1]
  console.log(data.value,'data.value',arg);
  
  await handler('paymentChannel', data.value)
  callback({ ...data, shopId: shopId.value })
}
onLoad(async (option) => {
  if(option?.paymentChannel === 'sft') {
    formData.paymentChannel = 'sft'
  }
  if (option?.shopId) {
    shopId.value = option?.shopId
  } else {
    uni.showModal({
      title: '提示',
      content: '请先提交门店入驻',
      showCancel: false,
      success: ({ confirm, cancel }) => {
        if (confirm) {
          uni.navigateBack()
        }
      }
    })
    return false
  }
  isApp.value = option?.from === 'app' || browserVersion().isHeiyin
  if (isApp.value) {
    // #ifdef H5
    console.log('前端注册回调时机==>', new Date())
    window.JSBridge.registerEvent('HYUserEvent', () => {
      header.Authorization = `Bearer ${getCookie('HYToken') || ''}`
      getShopExternals()
    })
    if (option?.isPreview) {
      // isPreview.value = true
    }
    // #endif
  } else {
    getShopExternals()
  }
})
onReady(() => {
  form.value.setRules(rules)
})
</script>
<template>
  <view class="container">
    <!-- #ifdef H5 -->
    <hy-nav-bar :title="'支付入网'" v-if="!isApp"></hy-nav-bar>
    <!-- #endif -->
    <c_previewSubsection v-if="isPreview" :isPreview="isPreview" paymentChannel="lkl" :shopId="shopId" />
    <view class="sft_rw" v-if="!isPreview" @click="toSft">需要入网盛付通？点这里>></view>
    <u-alert-tips type="warning" title="" v-if="tips" :show-icon="true" :description="tips"
      style="margin:20rpx 30rpx"></u-alert-tips>
    <u-tabs :list="tabs" :is-scroll="false" v-model="current" @change="change"></u-tabs>
    <u-form :model="formData" ref="form">
      <view class="section">
        <view class="title">店铺门头照
          <text class="tips"> *请确保图片清晰，文字可辨 </text>
        </view>
        <view class="uploadBox" flex>
          <u-form-item label="" label-width="auto" prop="frontImage" :border-bottom="false">
            <custom-upload ref="upload1" name="object" :action="uploadUrl" :header="header" max-count="1"
              :multiple="false" :custom-btn="true" @on-success="uploadSuccess" @on-remove="removeObject"
              :deletable="!isPreview" index="frontImage" :file-list="formData.frontImage
                ? [{ url: getImgFullPath(formData.frontImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">店铺门头照</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item label="" label-width="auto" prop="cashImage" :border-bottom="false">
            <custom-upload ref="upload2" name="object" :action="uploadUrl" max-count="1" :custom-btn="true"
              :deletable="!isPreview" :header="header" @on-success="uploadSuccess" @on-remove="removeObject"
              index="cashImage" :file-list="formData.cashImage
                ? [{ url: getImgFullPath(formData.cashImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">收银台照</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>
        <view class="uploadBox" flex>
          <u-form-item label="" label-width="auto" prop="insideImage" :border-bottom="false">
            <custom-upload ref="upload2" :action="uploadUrl" max-count="6" name="object" :custom-btn="true"
              :deletable="!isPreview" :header="header" @on-success="uploadSuccess" @on-remove="removeObject"
              index="insideImage" :file-list="formData.insideImage.length > 0
                ? formData.insideImage.map(item => { return { 'url': getImgFullPath(item) } })
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">店内照片</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>
        <u-form-item required label="经营地址（有营业执照的与营业执照一致）：" label-width="auto" label-position="top"
          prop="shopAdress"><u-input @blur="inputBlur($event, 'shopAdress')" v-model="formData.shopAdress"
            input-align="left" placeholder="请填写经营地址" :show-confirmbar="false" /></u-form-item>
      </view>
      <view class="section">
        <view class="title">法人代表身份证
          <text class="tips"> *请确保图片清晰，文字可辨，身份证需漏出四角 </text>
        </view>
        <view class="uploadBox" flex>
          <u-form-item label="" label-width="auto" prop="idCardFrontImage" :border-bottom="false">
            <custom-upload ref="upload1" name="object" :action="uploadUrl" :disabled="false" :header="header"
              max-count="1" :custom-btn="true" @on-success="uploadSuccess" @on-remove="removeObject"
              :deletable="!isPreview" index="idCardFrontImage" :file-list="formData.idCardFrontImage
                ? [{ url: getImgFullPath(formData.idCardFrontImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">身份证人像面</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item label="" label-width="auto" prop="idCardBackImage" :border-bottom="false">
            <custom-upload ref="upload2" name="object" :action="uploadUrl" max-count="1" :custom-btn="true"
              :deletable="!isPreview" :header="header" @on-success="uploadSuccess" @on-remove="removeObject"
              index="idCardBackImage" :file-list="formData.idCardBackImage
                ? [{ url: getImgFullPath(formData.idCardBackImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">身份证国徽面</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>

      </view>
      <view class="section">
        <view class="title">银行信息
          <text class="tips"> *请确保图片清晰，文字可辨 </text>
        </view>
        <u-radio-group v-model="formData.jiesuanType" @change="radioGroupChange($event, 'jiesuanType')"
          style="margin-top: 20rpx;">
          <u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" :disabled="item.disabled"
            label-size="28">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
        <view class="links" v-show="isFfrjs" style="margin-top: 30rpx;">
          <template v-for="(item, index) in protocolTemplates" :key="index">
            <text v-if="index === 3" @click="downloadByUrl(item.url, item.name)">《{{
              item.name }}》</text>
          </template>
        </view>
        <view class="uploadBox" flex>
          <u-form-item v-if="isFfrjs" label="" label-width="auto" prop="idCardFrontImage2" :border-bottom="false">
            <custom-upload ref="upload1" name="object" :action="uploadUrl" :header="header" max-count="1"
              :deletable="!isPreview" :custom-btn="true" @on-success="uploadSuccess" @on-remove="removeObject"
              index="idCardFrontImage2" :file-list="formData.idCardFrontImage2
                ? [{ url: getImgFullPath(formData.idCardFrontImage2) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">非法人身份证人像面</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item v-if="isFfrjs" label="" label-width="auto" prop="idCardBackImage2" :border-bottom="false">
            <custom-upload ref="upload2" name="object" :action="uploadUrl" max-count="1" :custom-btn="true"
              :deletable="!isPreview" :header="header" @on-success="uploadSuccess" @on-remove="removeObject"
              index="idCardBackImage2" :file-list="formData.idCardBackImage2
                ? [{ url: getImgFullPath(formData.idCardBackImage2) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">非法人身份证国徽面</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item v-if="isFfrjs" label="" label-width="auto" prop="zjsqAgreementImage" :border-bottom="false">
            <custom-upload ref="upload2" :action="uploadUrl" name="object" max-count="1" :custom-btn="true"
              :header="header" :deletable="!isPreview" @on-success="uploadSuccess" @on-remove="removeObject"
              index="zjsqAgreementImage" :file-list="formData.zjsqAgreementImage
                ? [{ url: getImgFullPath(formData.zjsqAgreementImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">非法人清算委托协议</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>
        <view class="uploadBox" flex>
          <u-form-item label="" label-width="auto" prop="bankcardImage" :border-bottom="false">
            <custom-upload ref="upload1" name="object" :action="uploadUrl" :header="header" max-count="1"
              :custom-btn="true" :deletable="!isPreview" @on-success="uploadSuccess" @on-remove="removeObject"
              index="bankcardImage" :file-list="formData.bankcardImage
                ? [{ url: getImgFullPath(formData.bankcardImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">银行卡号面</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item label="" label-width="auto" prop="bankcardBackImage" :border-bottom="false">
            <custom-upload ref="upload1" name="object" :action="uploadUrl" :header="header" max-count="1"
              :custom-btn="true" :deletable="!isPreview" @on-success="uploadSuccess" @on-remove="removeObject"
              index="bankcardBackImage" :file-list="formData.bankcardBackImage
                ? [{ url: getImgFullPath(formData.bankcardBackImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">银行卡背面</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>

        <u-form-item required label="银行卡号：" label-width="auto" prop="bankcardNo"><u-input
            @blur="inputBlur($event, 'bankcardNo')" v-model="formData.bankcardNo" input-align="right"
            placeholder="请填写银行卡号" :show-confirmbar="false" /></u-form-item>
        <u-form-item required label="开户行：" label-width="auto" prop="bankBranch"><u-input
            @blur="inputBlur($event, 'bankBranch')" v-model="formData.bankBranch" input-align="right"
            placeholder="请填写开户行（具体的分行）" :show-confirmbar="false" /></u-form-item>
        <u-form-item required label="邮箱：" label-width="auto" prop="bankcardEmail"><u-input
            v-model="formData.bankcardEmail" @blur="inputBlur($event, 'bankcardEmail')" input-align="right"
            placeholder="请填写邮箱（用于接收账单信息）" :show-confirmbar="false" /></u-form-item>
        <u-form-item required label="银行卡本人手机号：" label-width="auto" prop="bankcardPhone" :border-bottom="false"><u-input
            v-model="formData.bankcardPhone" @blur="inputBlur($event, 'bankcardPhone')" input-align="right"
            placeholder="请填写银行卡本人手机号" :show-confirmbar="false" /></u-form-item>
        <!-- <u-form-item required label="让利比例(%)：" label-width="auto" :border-bottom="false" prop="rate"><u-input
            v-model="formData.rate" @blur="inputBlur($event, 'rate')" input-align="right" placeholder="请填写让利比例"
            :show-confirmbar="false" /></u-form-item> -->
      </view>
      <view class="section" v-if="current === 1">
        <view class="title">盖章资料扫描件
          <text class="tips"> *请确保图片清晰，文字可辨 </text>
        </view>
        <view class="links">
          <template v-for="(item, index) in protocolTemplates" :key="index">
            <text v-if="index < 3" @click="downloadByUrl(item.url, item.name)">《{{
              item.name }}》</text>
          </template>

        </view>
        <view class="uploadBox" flex>
          <u-form-item v-if="current !== 0" label="" label-width="auto" prop="shrzAgreementImage" :border-bottom="false">
            <custom-upload ref="upload1" name="object" :action="uploadUrl" :header="header" max-count="1"
              :deletable="!isPreview" :custom-btn="true" @on-success="uploadSuccess" @on-remove="removeObject"
              index="shrzAgreementImage" :file-list="formData.shrzAgreementImage
                ? [{ url: getImgFullPath(formData.shrzAgreementImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">商户入驻协议</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item v-if="current !== 0" label="" label-width="auto" prop="qfjsAgreementImage" :border-bottom="false">
            <custom-upload ref="upload2" :action="uploadUrl" name="object" max-count="1" :custom-btn="true"
              :header="header" :deletable="!isPreview" @on-success="uploadSuccess" @on-remove="removeObject"
              index="qfjsAgreementImage" :file-list="formData.qfjsAgreementImage
                ? [{ url: getImgFullPath(formData.qfjsAgreementImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">清分结算授权委托书</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item v-if="isFfrjs" label="" label-width="auto" prop="shfzAgreementImage" :border-bottom="false">
            <custom-upload ref="upload2" :action="uploadUrl" name="object" max-count="1" :custom-btn="true"
              :header="header" :deletable="!isPreview" @on-success="uploadSuccess" @on-remove="removeObject"
              index="shfzAgreementImage" :file-list="formData.shfzAgreementImage
                ? [{ url: getImgFullPath(formData.shfzAgreementImage) }]
                : []
                ">
              <template v-slot:addBtn>
                <view class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">商户分账服务开通申请登记表</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>

      </view>
      <view class="section remark">
        <view class="red">
          备注： <br>
          1.信息填写完成后请在1-2个工作日后扫描下方二维码（将二维码保存到手机）<br>
          2.分别进行微信和支付宝认证（认证方式:微信和支付宝分别扫描对应的二维码，选择商户号，确定即可）
          <!-- 3.如有不清楚的地方，请咨询微信：lelex777(鲜老师) -->
        </view>
        <image class="img" src="https://image.blacksilverscore.com/uploads/c2131a39-c23d-4b0c-af48-3900f5de2103.jpg"
          mode="widthFix" />
        <image class="img" src="https://image.blacksilverscore.com/uploads/8d82cccf-3bf8-4254-8691-9cebf1f1c893.jpg"
          mode="widthFix" />
      </view>
      <view class="protocol" v-if="!isPreview">
        <u-checkbox-group>
          <u-checkbox v-model="agree">
            <text>同意资料申报由黑银工作人员办理</text>
          </u-checkbox>
        </u-checkbox-group>
      </view>
      <u-button type="primary" style="margin:0 30rpx" @click="submit" v-if="!isPreview">提交审核</u-button>
      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </u-form>
    <c_channelSelector v-if="!isPreview" :isPreview="isPreview" ref="channelSelectorRef" :paymentChannel="formData.paymentChannel" :shop-id="shopId"
      @on-confirm="channelConfirm" />
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 60rpx;

  .sft_rw {
    padding: 30rpx;
    color: #2979ff;
    text-align: center;
  }

  .section {
    padding: 30rpx 20rpx;
    margin: 30rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);

    &.remark {
      line-height: 46rpx;

      .red {
        color: red;
        margin-bottom: 20rpx;
      }

      .img {
        margin: 0 auto;
        display: block;
        max-width: 100%;
      }
    }

    .title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
      font-weight: bold;
    }

    .tips {
      font-size: 20rpx;
      color: red;
    }

    .links {
      font-size: 24rpx;
      color: #2979ff;
    }
  }
}

.protocol {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 50rpx 0 30rpx 0;

  .link {
    color: #6b9eff;
  }
}

.slot-btn {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  background-color: rgb(244, 245, 246);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  .des {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    padding: 10rpx;
    font-size: 24rpx;
    color: #fff;
    // height: 50rpx;
    line-height: 30rpx;
  }
}

.uploadBox {
  gap: 16rpx;
  margin-top: 20rpx;
}

.submitBtn {
  margin: 50rpx 0;
  display: block;
}
</style>
